<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Spirit8</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/swiper-bundle.min.css">
  <link rel="stylesheet/less" href="css/reset.less">
  <link rel="stylesheet/less" href="css/common.less">
  <link rel="stylesheet/less" href="css/demo.less">
</head>

<body>
  <nav class="navbar navbar-default bgcolor">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
          data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Spirit8</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#home">HOME</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#team">team</a></li>
          <li><a href="#services">SERVICES</a></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
  <div id="banner">
    <h1>wELCOME on <span>spirit8</span></h1>
    <h5>We are a digital agency with <span>years of experience</span> and with <span>extraordinary people</span>
    </h5>
    <div class="arrow-btn">
      <a href="#footer">
        <img src="images/arrow.png" alt="">
      </a>
    </div>
  </div>

  <div id="about">
    <div class="container">
      <div class="left">
        <img src="images/about-background.png" alt="">
      </div>
      <div class="right">
        <div class="small-title">
          ABOUT US
        </div>
        <div class="big-title">Some words <span>about us</span></div>

        <div class="line"></div>

        <div class="content">
          We love building and rebuilding brands through our specific skills. Using colour, fonts, and
          illustration, we brand companies in a way they will never forget.
        </div>

        <ul>
          <li>
            <img src="images/icon16.png" alt="">
            Mission - <span>We deliver uniqueness and quality</span>
          </li>

          <li>
            <img src="images/icon16.png" alt="">
            Mission - <span>We deliver uniqueness and quality</span>
          </li>

          <li>
            <img src="images/icon16.png" alt="">
            Mission - <span>We deliver uniqueness and quality</span>
          </li>
        </ul>

        <div class="about-btn">
          <img src="images/about-btn.png" alt="">
          Browse our work
        </div>
      </div>
    </div>
  </div>

  <div id="team">
    <div class="title">Meet <span>our team</span></div>
    <div class="line"></div>
    <div class="line2"></div>

    <!-- 轮播图 -->
    <div class="swiper team-swiper container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="list">
            <div class="item">
              <div class="avatar">
                <img src="images/avatar.jpg" alt="">
              </div>
              <div class="nickname">
                <p>Jason Statham</p>
                <p>Knife designer</p>
              </div>
              <div class="info">
                Do not seek to change what has come before. Seek to create that which has not.
              </div>
            </div>

            <div class="item">
              <div class="avatar">
                <img src="images/avatar.jpg" alt="">
              </div>
              <div class="nickname">
                <p>Jason Statham</p>
                <p>Knife designer</p>
              </div>
              <div class="info">
                Do not seek to change what has come before. Seek to create that which has not.
              </div>
            </div>

            <div class="item">
              <div class="avatar">
                <img src="images/avatar.jpg" alt="">
              </div>
              <div class="nickname">
                <p>Jason Statham</p>
                <p>Knife designer</p>
              </div>
              <div class="info">
                Do not seek to change what has come before. Seek to create that which has not.
              </div>
            </div>

            <div class="item">
              <div class="avatar">
                <img src="images/avatar.jpg" alt="">
              </div>
              <div class="nickname">
                <p>Jason Statham</p>
                <p>Knife designer</p>
              </div>
              <div class="info">
                Do not seek to change what has come before. Seek to create that which has not.
              </div>
            </div>
          </div>
        </div>

        <div class="swiper-slide">
          <div class="list">
            <div class="item">
              <div class="avatar">
                <img src="images/avatar.jpg" alt="">
              </div>
              <div class="nickname">
                <p>Jason Statham</p>
                <p>Knife designer</p>
              </div>
              <div class="info">
                Do not seek to change what has come before. Seek to create that which has not.
              </div>
            </div>

            <div class="item">
              <div class="avatar">
                <img src="images/avatar.jpg" alt="">
              </div>
              <div class="nickname">
                <p>Jason Statham</p>
                <p>Knife designer</p>
              </div>
              <div class="info">
                Do not seek to change what has come before. Seek to create that which has not.
              </div>
            </div>

            <div class="item">
              <div class="avatar">
                <img src="images/avatar.jpg" alt="">
              </div>
              <div class="nickname">
                <p>Jason Statham</p>
                <p>Knife designer</p>
              </div>
              <div class="info">
                Do not seek to change what has come before. Seek to create that which has not.
              </div>
            </div>

            <div class="item">
              <div class="avatar">
                <img src="images/avatar.jpg" alt="">
              </div>
              <div class="nickname">
                <p>Jason Statham</p>
                <p>Knife designer</p>
              </div>
              <div class="info">
                Do not seek to change what has come before. Seek to create that which has not.
              </div>
            </div>
          </div>
        </div>

        <div class="swiper-slide">
          <div class="list">
            <div class="item">
              <div class="avatar">
                <img src="images/avatar.jpg" alt="">
              </div>
              <div class="nickname">
                <p>Jason Statham</p>
                <p>Knife designer</p>
              </div>
              <div class="info">
                Do not seek to change what has come before. Seek to create that which has not.
              </div>
            </div>

            <div class="item">
              <div class="avatar">
                <img src="images/avatar.jpg" alt="">
              </div>
              <div class="nickname">
                <p>Jason Statham</p>
                <p>Knife designer</p>
              </div>
              <div class="info">
                Do not seek to change what has come before. Seek to create that which has not.
              </div>
            </div>

            <div class="item">
              <div class="avatar">
                <img src="images/avatar.jpg" alt="">
              </div>
              <div class="nickname">
                <p>Jason Statham</p>
                <p>Knife designer</p>
              </div>
              <div class="info">
                Do not seek to change what has come before. Seek to create that which has not.
              </div>
            </div>

            <div class="item">
              <div class="avatar">
                <img src="images/avatar.jpg" alt="">
              </div>
              <div class="nickname">
                <p>Jason Statham</p>
                <p>Knife designer</p>
              </div>
              <div class="info">
                Do not seek to change what has come before. Seek to create that which has not.
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
  </div>
</body>

</html>
<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/swiper-bundle.min.js"></script>
<script src="js/less.min.js"></script>

<script>
  const TeamSwiper = new Swiper('.team-swiper', {
    loop: true, // 循环模式选项

    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    }
  })
</script>